<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="${pageContext.request.contextPath}/css/mainframe.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="./js/prototype.js" ></script>
	
<script type="text/javascript">
function getXmlHttpRequest(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHttp");
	}else{
		alert("The browser does not support XmlHttpRequest object");
		return;
	}
}

var xmlHttp=getXmlHttpRequest();

function search(){
	var str=document.getElementById("txt").value;
	//hide search
	if(str==""){
		document.getElementById('suggest').style.display='none';
		return;
	}else{
		//display the suggest
		document.getElementById('suggest').style.display='';
	}
	str=encodeURI(str);
	//release th e pressure for server because of input in field at a high speed
	if(xmlHttp.readyState==4||xmlHttp.readyState==0){
		var url="testAjax.action?userName="+str;
		xmlHttp.open("post",url,true);
	    xmlHttp.onreadystatechange=callback;
	    xmlHttp.send(null);
	}
}

function callback(){
	if(xmlHttp.readyState==4){
		if(xmlHttp.status==200){	
			var str=xmlHttp.responseText;
			var str1=str.split("\n");
			var result="";
			for(i=0;i<str1.length;i++){
			   result+='<div onmouseover="javascript:suggestOver(this);"';
			   result+='onmouseout="javascript:suggestOut(this);"';
			   result+='onclick="javascript:setSearch(this.innerHTML);"';
			   result+='class="suggest_link">'+str1[i]+'</div>';
			}
			document.getElementById("suggest").innerHTML=result;
		}else{
			alert("problem retrieving data:"+xmlHttp.statusText+"\n"+xmlHttp.status);
		}
	}
}

//mouse over function
function suggestOver(div_value){
	div_value.className='suggest_link_over';
}
//mouse out function
function suggestOut(div_value){
	div_value.className='suggest_link';
}
//click function
function setSearch(value){
	document.getElementById('txt').value=value;
	document.getElementById('suggest').innerHTML='';
	document.getElementById('suggest').style.display='none';
}

OnDocumentClick=function(event){
	if(!event){
		event=window.event;//ie
	}
	var e=event.target;//for firefox
	if(!e){
		e=event.srcElement;//for ie
	}
	while(e){
		//only if event source is on search_suggest or the search box
		//the popup div will not be hidden
		if(e==document.getElementById('suggest')||e==document.getElementById('txt')){
			return;
		}
		e=e.parentNode;
	}
	document.getElementById('suggest').style.display="none";
}

//for ie
try{
	document.onclick=OnDocumentClick;
}catch(e){
}
//for firfox(core Gecko)
try{
	document.addEventListener('click',OnDocumentClick,true);
}catch(e){
}
</script>

<style type="text/css">
body{
font-size:11px arial;
}

.suggest_link {
	background-color: #FFFFCC;
	padding: 2px 6px 2px 6px;
}

.suggest_link_over {
	cursor: default;
	color: white;
	background-color: #3366CC;
	padding: 2px 6px 2px 6px;
}

#suggest {
	position: absolute;
	text-align: left;
	width: 153px;
	border: 1px solid #000000;
}
</style>
</head>
<body leftmargin="0" topmargin="0">
  <table border="0" width="100%" cellpadding="0" bgcolor="#ffffff">
   <tr> <td align="center">
   <div style="width:98%;">
    <fieldset><legend>Ajax验证</legend>
        <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#9eb3d0">
            <tr>
                <th width="18%" >用户名：</th>
                <td width="61%"><input type="text" id="user" name="userName" size="8"/></td>
			</tr>
			<tr>
                <th>密码：</th>
                <td><input type="password" name="pwd" size="10"/></td>
			</tr>
			<tr><td colspan="2"><span id="msg"></span></td></tr>
		</table>
   <div><button class="btn_input" value="" onclick="testAjax();"><img src="${pageContext.request.contextPath}/images/ico_chuli.png" />测试一</button>
   <button class="btn_input" value="" onclick="testAjax2();"><img src="${pageContext.request.contextPath}/images/ico_chuli.png" />测试二</button>
   <button class="btn_input" value="" onclick="testAjax3();"><img src="${pageContext.request.contextPath}/images/ico_chuli.png" />测试三</button>
   </div></fieldset>
</div></td></tr>
</table>
<div style="padding-left:1em;width:98%;">
<fieldset><legend>AutoComplete(Google Suggest)</legend>
        <form id="gsuggest" action="http://www.google.com/search">
			<input id="txt" type="text" onkeyup="search()" onfocus=""/>
			<button class="btn_input" type="submit"><img src="${pageContext.request.contextPath}/images/ico_chuli.png" />Search</button><br/>
			<div id="suggest" style="display:none"></div>
		</form>
</fieldset> 
</div>
<script type="text/javascript">
	function testAjax(){
		var xmlHttpRequest = null;
		//初始化xmlHttpRequest对象
        if ((typeof XMLHttpRequest) != 'undefined') {
            xmlHttpRequest = new XMLHttpRequest();// FF
        }else {
            xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');// IE
        }
        var url = 'testAjax.action?userName='+document.getElementById('user').value;
        xmlHttpRequest.open('get', url, true);//true表示异步
        // 注册了一个‘状态监听器’，每当状态发生改变的时候，ajax就会调用onreadystatechange所指定的回调函数
        xmlHttpRequest.onreadystatechange = function(){
            //xmlHttpRequest.readyState属性表示当前的状态码
            if (xmlHttpRequest.readyState == 4&&xmlHttpRequest.status==200) {
                //responseText返回文本方式的响应内容
                var respTxt = xmlHttpRequest.responseText;
                if(respTxt!=null){
                	document.getElementById('msg').innerHTML = respTxt;
                }else {
                	document.getElementById('msg').innerHTML = 'loading...';
                }
            }
        };
        xmlHttpRequest.send(null);  // 发送get请求,参数为null,如果为post,则key:value传参 
		alert("异步模式");
		/*
		备注：readyState的五种状态
		状态			   名称						  描述
		0      Uninitialized  初始化状态。XMLHttpRequest 对象已创建（未调用open()之前）或已被 abort()方法重置。
		1      Open           open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
		2      Sent           Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
		3      Receiving      所有响应头部都已经接收到。响应体开始接收但未完成。
		4      Loaded         HTTP 响应已经完全接收。
		*/
	}
</script>
<script type="text/javascript">
//prototype.js
	function testAjax2(){
		url = "testAjax.action?userName="+document.getElementById('user').value;
		new Ajax.Request(url, {
			method :'get',
			onSuccess : function(req) {
				var respTxt=req.responseText;
				if(respTxt!= ""){		
					document.getElementById('msg').innerHTML = respTxt;
		        }else {
		        	document.getElementById('msg').innerHTML = 'loading...';
				}
			}
		});	
	}

</script>
<script type="text/javascript">
	function testAjax3(companyname){
		var url = "testAjax.action";
		var paras ="userName="+document.getElementById('user').value;
		var myAjax = new Ajax.Request(url, {
			method : 'post',
			parameters : paras,
			onComplete : callBackFunction
			}
		);
	}
	function callBackFunction(req){
		var respTxt=req.responseText;
		if(respTxt!= ""){		
			document.getElementById('msg').innerHTML = respTxt;
        }else {
        	document.getElementById('msg').innerHTML = 'loading...';
		}
	}
</script>

</body>
</html>